<!-- 实时位置 -->
<template lang="html">
  <div class="mapBox">

    <div class="mapLeft">

      <div class="container">
        <!-- <div class="search-box">
          <input
            v-model="searchKey"
            type="search"
            id="search">
          <button @click="searchByHand">搜索</button>
          <div class="tip-box" id="searchTip"></div>
        </div> -->
        <!--
          amap-manager： 地图管理对象
          vid：地图容器节点的ID
          zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
          center： 地图中心点坐标值
          plugin：地图使用的插件
          events： 事件
        -->
        <el-amap class="amap-box"
          :amap-manager="amapManager"
          :vid="'amap-vue'"
          :zoom="zoom"
          :plugin="plugin"
          :center="center"
          :events="events"
        >
          <!-- 标记 -->
          <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
        </el-amap>
      </div>

    </div>

    <div class="mapInfo">
      <p><span>车牌：</span>{{ plateNumber }}</p>
      <p><span>经纬度：</span>{{ info.lon }}<span class="kongSpan"></span>{{ info.lat }}</p>
      <p><span>地址：</span>{{ poiInfo.address }}</p>
      <p><span>方向：</span>{{ drcText(info.drc) }}</p>
      <p><span>速度(km/h)：</span>{{ info.spd }}</p>
      <p><span>最近的路口：</span>{{ poiInfo.nearestJunction }}</p>
      <p><span>最近的POI：</span>{{ poiInfo.nearestPOI }}</p>
    </div>
    
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import { getSingleLocation } from "@/api/tws/gis/gis";

let amapManager = new AMapManager();

export default {
  name:'MapMaker',
  props: {
    plateNumber: {
      type: String
    }
  },
  data() {
    let self = this
    return {
      // 定位信息
      info: {},
      // POI信息
      poiInfo: {},
      address: null,
      // 搜索内容
      searchKey: '',
      amapManager,
      // 点击标记
      markers: [],
      searchOption: {
        city: '全国',
        citylimit: true
      },
      // 地图中心点
      center: [0, 0],
      zoom: 15,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            // self.initSearch()
          })
        },
        // 点击获取地址的数据
        // click(e) {
        //   self.markers = []
        //   let { lng, lat } = e.lnglat
        //   self.lng = lng
        //   self.lat = lat
        //   self.center = [lng, lat]
        //   self.markers.push([lng, lat])
        //   // 这里通过高德 SDK 完成。
        //   let geocoder = new AMap.Geocoder({
        //     radius: 1000,
        //     extensions: 'all'
        //   })
        //   geocoder.getAddress([lng, lat], function(status, result) {
        //     if (status === 'complete' && result.info === 'OK') {
        //       if (result && result.regeocode) {
        //         console.log(result.regeocode.formattedAddress) //控制台打印地址
        //         self.address = result.regeocode.formattedAddress
        //         self.searchKey = result.regeocode.formattedAddress
        //         self.$nextTick()
        //       }
        //     }
        //   })
        // }
      },
      // 一些工具插件
      plugin: [
        {
          pName: 'Geocoder',
          events: {
            init (o) {
              //console.log("一些工具插件--地址"+o.getAddress())
            }
          }
        },
        // {
        //   // 定位当前位置
        //   pName: 'Geolocation',
        //   events: {
        //     init(o) {
             
        //       // o是高德地图定位插件实例
        //       o.getCurrentPosition((status, result) => {
        //         if (result && result.position) {
        //           // 设置经度
        //           self.lng = result.position.lng
        //           // 设置维度
        //           self.lat = result.position.lat
        //           // 设置坐标
        //           self.center = [self.lng, self.lat]
        //           self.markers.push([self.lng, self.lat])
        //           // load
        //           self.loaded = true
        //           // 页面渲染好后
        //           self.$nextTick()
        //         }
        //       })
        //     }
        //   }
        // },
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
               //console.log("工具栏:"+instance);
            }
          }
        },
        // {
        //   // 鹰眼
        //   pName: 'OverView',
        //   events: {
        //     init(instance) {
        //        //console.log("鹰眼:"+instance);
        //     }
        //   }
        // },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
               //console.log("地图类型:"+instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
               //console.log("搜索:"+instance)
            }
          }
        }
      ]
    }
  },
  watch: {
    plateNumber: function(newData, oldData) {
      this.reset();
      if(newData != null) {
        this.$nextTick(function() {
          this.getSingleLocation(newData);
        })
      }
    },
    deep: true // 可以深度检测到 obj 对象的属性值的变化
  },
  computed: {
    // 确定方向
    drcText() {
      return function(value) {
        return this.toDrcText(value);
      }
    }
  },
  methods: {
    initSearch() {
      let vm = this
      let map = this.amapManager.getMap()
      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        })
        vm.poiPicker = poiPicker
        // 监听poi选中信息
        poiPicker.on('poiPicked', function(poiResult) {
          // console.log(poiResult)
           let source = poiResult.source
           let poi = poiResult.item
           if (source !== 'search') {
             poiPicker.searchByKeyword(poi.name)
           } else {
             poiPicker.clearSearchResults()
             vm.markers = []
             let lng = poi.location.lng
             let lat = poi.location.lat
             let address = poi.cityname + poi.adname + poi.name
             vm.center = [lng, lat]
             vm.markers.push([lng, lat])
             vm.lng = lng
             vm.lat = lat
             vm.address = address
             vm.searchKey = address
           }
        })
      })
    },
    // 搜索地点
    searchByHand() {
      if (this.searchKey !== '') {
        this.poiPicker.searchByKeyword(this.searchKey)
      }
    },
    reset() {
      this.info = {
        lon: '',  // 经度
        lat: '',  // 纬度
        adr: '',  // 地理位置
        province: '',  // 省
        city: '',      // 市
        country: '',   // 县
        drc: '',  // 方向
        spd: '',  // 速度(单位: km/h)
        mil: '',  // 里程(单位: 百米，除以10之后，单位为 km)
        utc: '' // 定位时间
      }
      this.poiInfo = {
        address: '',
        nearestJunction: '',  // 最近的十字路口
        nearestPOI: '',  // 最近的POI信息
        nearestRoad: ''  // 最近的道路
      }
    },
    // 确定方向(参照北京中交兴路车联网科技有限公司对接文档)
    toDrcText(drc) {
      if(drc) {
        if(drc == 0 || drc == 360) {
          return '正北';
        } else if(drc > 0 && drc < 90) {
          return '东北';
        } else if(drc == 90) {
          return '正东';
        } else if(drc > 90 && drc < 180) {
          return '东南';
        } else if(drc == 180) {
          return '正南';
        } else if(drc > 180 && drc < 270) {
          return '西南';
        } else if(drc == 270) {
          return '正西';
        } else if(drc > 270 && drc <= 359) {
          return '西北';
        } else {
          return '未知';
        }
      } else {
        return drc;
      }
    },
    // 获取当前车辆的位置
    getSingleLocation(plate) {
      getSingleLocation(plate).then(res => {
        console.log("****车辆实时位置****" + JSON.stringify(res));
        if(res) {
          this.info = res;
          this.setMark(res.lon, res.lat, plate)
        } else {
          this.msgError("获取位置失败")
        }
      })
    },
    // 坐标转换(WGS84坐标 -> GCJ-02坐标)
    toLnglat(lon, lat) {
      // 参数：经度、纬度、是否自动将经度值修正到 [-180,180] 区间内，缺省为false
      // 除以600000：文档中说明了单位为 1/600000.0
      return new AMap.LngLat(lon/600000, lat/600000, false);
    },
    // 在地图上标记车辆位置(参数：经度、纬度、车牌号)
    setMark(lon, lat, plate) {
      let map = this.amapManager.getMap();
      // 清除地图上所有添加的覆盖物
      map.clearMap();
      let ll = this.toLnglat(lon, lat);
      this.info.lon = ll.lng;
      this.info.lat = ll.lat;
      // 确定地图中心点
      this.center = [ll.lng, ll.lat];
      // 图标
      var icon = new AMap.Icon({
          size: new AMap.Size(20, 33),    // 图标尺寸
          image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',  // Icon的图像
          imageSize: new AMap.Size(20, 33)   // 根据所设置的大小拉伸或压缩图片
      });
      // 标记
      var marker = new AMap.Marker({
        //content: '<div style="color: blue; font-size: 5px; width: 80px;">' + plate + '</div><div class="el-icon-truck"></div>', // 设置了 content 以后会覆盖 icon 属性
        position: ll,  // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-10, -10),  // 点标记显示位置偏移量，指定position后，默认以marker左上角位置为基准点
        icon: icon, // 添加 Icon 图标 URL
        title: plate , // 鼠标移入后弹窗显示
        imageSize: new AMap.Size(20, 25)  
      });
      map.add(marker);
      // 获取poi
      let that = this;
      AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        var positionPicker = new PositionPicker({
          mode: 'dragMarker',
          position: ll,
          map: map
        });
        // 开始选址
        positionPicker.start(ll);
        positionPicker.on('success', function(positionResult) {
          that.poiInfo = positionResult;
        })
        positionPicker.on('fail', function(positionResult) {
        })
        // 停止选址
        positionPicker.stop();
      })
    }
  }
}
</script>

<style lang="css">
.el-dialog__body {
    padding: 10px 20px 20px;
}

.mapBox {
  overflow: hidden;
  zoom: 1;
}
.mapLeft {
  float: left;
  width: 73%;
  height: 470px; 
}

.mapInfo {
  width: 25%;
  float: right;
  color: #666;
  font-size: 15px;
  line-height: 26px;
  height: 480px;
  overflow-y: scroll;
}

.mapInfo p {
  margin: 0 0 5px;
}

.mapInfo span {
    display: block;
    color: #999;
}

.mapInfo .kongSpan {
  padding:  0 8px;
    display: inline-block;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  /* border: 1px solid #999; */
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 30%;
  left: 13%;
  top: 10px;
  height: 30px;
}
.search-box input {
  float: left;
  width: 80%;
  height: 100%;
  border: 1px solid #30ccc1;
  padding: 0 8px;
  outline: none;
}
.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #30ccc1;
  color: #fff;
  outline: none;
}
.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>
